<template>
  <div>
    <city-header></city-header>
    <city-inputs :list="cityList"></city-inputs>
    <city-content :list="contentList" :contList="cityList" :letter="spellList"></city-content>
    <city-spell :list="cityList" @selects="handles"></city-spell>
  </div>
</template>

<script>
import CityHeader from './coments/Header.vue'
import CityInputs from './coments/Inputs.vue'
import CityContent from './coments/Content.vue'
import axios from 'axios'
import CitySpell from './coments/Spell.vue'

export default {
  name: 'city',
  components: {
    CityHeader,
    CityInputs,
    CityContent,
    CitySpell
  },
  data () {
    return {
      contentList: [],
      cityList: {},
      spellList: ''
    }
  },
  methods: {
    getCityInfo () {
      axios.get('/localdata/city.json')
        .then((response) => {
          this.getCitySuccess(response)
        })
        .catch(() => {
        })
    },
    getCitySuccess (response) {
      let dataObj = response.data// 获取json里的数据
      let dataList = dataObj.data// 获取列表里的数据
      if (dataObj.ret && dataList) {
        this.contentList = dataList.hotCities
        this.cityList = dataList.cities
      }
    },
    handles (key) {
      this.spellList = key
    }
  },
  mounted () {
    this.getCityInfo()
  }
}
</script>

<style>
</style>
